<template>
  <div id="company">
    <el-form ref="form"
             :model="form"
             label-width="100px">
      <el-form-item label="账号:">
        <el-input v-model="form.ber_uname" disabled></el-input>
      </el-form-item>
      <el-form-item label="联系电话:">
        <el-input v-model="form.ber_phone" disabled></el-input>
      </el-form-item>
      <el-form-item label="姓名:">
        <el-input v-model="form.ber_name" :disabled="!isEdit"></el-input>
      </el-form-item>
      <el-form-item label="身份证:">
        <el-input v-model="form.ber_idnum" :disabled="!isEdit"></el-input>
      </el-form-item>
      <el-form-item label="邮箱:">
        <el-input v-model="form.ber_email" :disabled="!isEdit"></el-input>
      </el-form-item>
      <el-form-item label="地址:">
        <el-popover
                placement="top-start"
                trigger="click">
          <v-distpicker :province="address.province"
                        :city="address.city"
                        :area="address.area"
                        :disabled="!isEdit"
                        @selected="data => {form.ber_address = data.province.value + data.city.value + data.area.value}">
          </v-distpicker>
          <el-input v-model="form.ber_address"
                    slot="reference"
                    :disabled="!isEdit"></el-input>
        </el-popover>
      </el-form-item>
      <el-form-item label="出生日期:">
        <el-date-picker
                :disabled="!isEdit"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
                v-model="form.ber_birth">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="性别:">
        <el-select v-model="form.ber_sex" :disabled="!isEdit">
          <el-option v-for="(item,index) in dictionary.sex"
                     :key="index"
                     :label="item.name" :value="item.key"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="头像">
        <upload :is-edit="isEdit" @getImgUrl="getImgUrl" :type="1"/>
      </el-form-item>
    </el-form>
    <template v-if="isEdit">
      <el-button  type="primary" @click="cancel">
        取消
      </el-button>
      <el-button  type="primary" @click="save">
        保存
      </el-button>
    </template>
    <template v-else>
      <el-button type="primary" @click="edit">
        编辑
      </el-button>
    </template>
  </div>
</template>

<script>
  import axios from "axios";
  import {cloneObject} from "../../../utils/common";
  import {dictionary} from "../../../utils/allDictionary";
  import Upload from "../../../components/content/Upload";

  export default {
    name: "Company",
    components:{
      Upload
    },
    inject :['reload'],
    mounted() {
      // this.form = cloneObject(this.$store.getters.getInfo)
      this.form = this.$store.getters.getInfo
    },
    data(){
      return{
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        form:{},
        address : {province:'',city:'',area:''},
        re_address:{province:'',city:'',area:''},
        isEdit:false,
        dictionary:dictionary
      }
    },
    methods:{
      edit(){
        this.isEdit = true
      },
      save(){
        this.isEdit = false
        console.log(this.form)
        let url = 'https://haotry.top/api/buyer/updateBuyer'

        axios.post(url,JSON.stringify(this.form),{
          headers:{
            'Content-Type':'application/json'
          }
        }).then(res => {
          let data = res.data

          if(data.status === 200){
            alert(data.msg)
            sessionStorage.setItem('info',JSON.stringify(this.form))
            this.$store.commit('setInfo',{info:this.form})
            this.reload()
          }
          else{
            alert(data.msg)
            this.form = cloneObject(this.$store.getters.getInfo)
          }
        })

      },
      cancel(){
        this.isEdit = false
        this.form = cloneObject(this.$store.getters.getInfo)
      },
      getImgUrl(url){
        this.form.ber_image = url
        console.log('采买方头像')
        console.log(url)
      }
    }
  }
</script>

<style scoped>
  #company{
    margin: 20px;
    width: 500px;
    font-size: 18px;
  }
  /deep/.el-input{
    font-size: 16px;
  }
  /deep/.el-input.is-disabled .el-input__inner{
    color: #999;
  }
  /deep/.el-form-item{
    margin-bottom: 10px;
  }
  /deep/.el-select,.el-date-editor.el-input{
    width: 100%;
  }
  /deep/.distpicker-address-wrapper select{
    width: 130px;
  }
  /deep/.distpicker-address-wrapper select[disabled]{
    background-color: #F5F7FA;
    color: #999;
  }
</style>